@import "common";
@import "breadcrumb";

.page-main {
    min-height: 100%;
    padding: 0 0 60px 0;
}

.main-bd{
    padding: 30px 30px 0;
}

.sidebar, .main {
    border: 1px solid #ededed;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 2px 1px rgba(237, 237, 237, 0.7);
}


/* sidebar style */
.sidebar {
    float: left;
    width: 372px;
    text-align: center;

    dl {
        margin: 0 0 40px 0;

        &:before {
            content: "";
            display: block;
            width: 133px;
            height: 126px;
            margin: 46px auto 20px;
            font-size: 0;
            line-height: 0;
            background: url(../img/ico_chm.png?__sprite) no-repeat;
        }
    }

    h2 {
        margin: 0 0 14px 0;
        font-size: 24px;
        font-weight: normal;
        color: #000;
    }

    dd {
        margin: 0 63px;
        font-size: 18px;
        color: #767676;
        text-align: left;

        &:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 18px;
            height: 18px;
            margin: 0 3px 0 0;
        }

        &.ext {
            &:before {
                background: url(../img/ico_doc_type.png?__sprite) no-repeat;
            }
        }

        &.date {
            &:before {
                background: url(../img/ico_upload_time.png?__sprite) no-repeat;
            }
        }
    }

    .action {
        padding: 26px 0 30px;
        background: #f4f4f4;
        overflow: hidden;

        a {
            display: block;
            margin: 0 auto 17px;
            text-align: center;
            font-size: 17px;
            border-radius: 5px;

            &:before {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: 29px;
                height: 25px;
                margin: 0 8px 0 0;
            }

            &.btn-preview {
                width: 161px;
                height: 47px;
                line-height: 47px;
                background: #0281ff;
                color: #fff;

                &:hover {
                    background: #1a8bfc;
                }

                &:before {
                    background: url(../img/ico_preview.png?__sprite) 0 3px no-repeat;
                }
            }

            &.btn-download {
                width: 159px;
                height: 45px;
                line-height: 45px;
                border: 1px solid #dcdcdc;
                background: url(../img/bg_btn_gray_normal.gif) repeat-x;
                background: linear-gradient(#fff, #e5e5e5);

                &:hover {
                    background-image: url(../img/bg_btn_gray_hover.gif);
                    background: linear-gradient(#e5e5e5, #fff);
                }

                &:before {
                    background: url(../img/ico_download.png?__sprite) no-repeat;
                }
            }
        }
    }
}


/* main style */
.main {
    min-height: 1000px;
    margin: 0 0 190px 402px;
    padding: 43px 50px 80px;

    h3 {
        padding: 0 10px 18px;
        margin: 0 0 32px 0;
        border-bottom: 1px solid #e8e8e8;
        font-weight: normal;
        font-size: 25px;
        color: #000;

        &:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 22px;
            height: 24px;
            margin: -5px 5px 0 0;
            background:  url(../img/ico_manual.png?__sprite) no-repeat;
        }
    }

    .tit {
        margin: 0 0 24px 0;
        font-size: 20px;
        color: #000;
        font-weight: normal;
    }

    p {
        font-size: 18px;
        line-height: 30px;
        word-break: break-all;
        color: #6c6c6c;
    }
}

